<template>
	<view class="coupon-item margin-v" :class="active?'active':'unactive'" :style="style" >
		<view class="discount-money">
			<!-- v-if="baseCoupon.discountType===0" -->
			<view class="price" v-if="baseCoupon.discountMoney">
				<!-- <text class="unit"></text> -->
				<text class="money">￥{{baseCoupon.discountMoney}}</text>
			</view>
			<!-- v-else-if="baseCoupon.discountType===1" -->
			<!-- <view class="price" >
				<text>{{baseCoupon.discountRate}}</text>
				<text class="unit">折</text>
			</view> -->
			<!-- <view class="price" style="font-size: 38rpx;" v-else-if="baseCoupon.discountType===2">
				<text>包邮</text>
			</view>
			<view class="price" style="font-size: 36rpx;" v-else-if="baseCoupon.discountType===3">
				<text>兑换券</text>
			</view> -->
			<view class="type">
				<text v-if="baseCoupon.minimumMoney===0">无门槛</text>
				<text v-else>有门槛</text>
				<!-- 	<text v-else-if="baseCoupon.discountType===2">运费券</text>
				<text v-else-if="baseCoupon.discountType===3">兑换券</text> -->
			</view>
		</view>
		<view class="detail">
			<view class="title">
				<text>{{baseCoupon.title}}</text>
			</view>
			<view class="label">
				<text v-if="baseCoupon.usableRangeType === 0">全场通用</text>
				<text v-else-if="baseCoupon.usableRangeType === 1">盲盒可用</text>
				<text v-else-if="baseCoupon.usableRangeType === 2">指定商品</text>
			</view>
			<view class="label" v-if="baseCoupon.scorePrice">
				<text v-if="baseCoupon.scorePrice">{{baseCoupon.scorePrice}}{{scoreAlias}}兑换</text>
			</view>
			<view class="valid-date" v-if="baseCoupon.isPerpetual === 0">
				过期时间：<text>{{baseCoupon.endTime}}</text>
			</view>
			<view class="valid-date" v-if="baseCoupon.isPerpetual === 1">
				过期时间：<text>永久</text>
			</view>
			<view class="limit-type gray">
				 <view v-if="baseCoupon.usableRangeType=== 0  || baseCoupon.usableRangeType=== 1 || baseCoupon.usableRangeType=== 2">
					<text v-if="baseCoupon.minimumMoney">满{{baseCoupon.minimumMoney}}元可用</text>
					<!-- <text v-else>使用立减{{baseCoupon.discountMoney}}元</text> -->
				</view>
				<!--<view v-else-if="baseCoupon.discountType===1">
					<text v-if="baseCoupon.minimumMoney">满{{baseCoupon.minimumMoney/100}}元</text>
					<text>享{{baseCoupon.discountRate/10}}折优惠</text>
				</view>
				<view v-else-if="baseCoupon.discountType===2">
					<text v-if="baseCoupon.minimumMoney">满{{baseCoupon.minimumMoney/100}}元</text>
					<text>享受包邮优惠</text>
				</view> -->
				<view>
					<text>{{baseCoupon.description}}</text>
				</view>
			</view>
		</view>
		<view class="action"  @tap="click">
			<view class="btn" hover-class="hover" v-if="!isSelected && baseCoupon.minimumMoney < totalprice">
				{{active?activeText:unActiveText}}
			</view>
			<view class="btn bg-gray" hover-class="hover" v-if="isSelected">
				取消使用
			</view>
			
		</view>
		<view class="bg-btn bg-gray" v-if="baseCoupon.minimumMoney > totalprice">
			不可用
		</view>
	</view>
</template>

<script>
	import moment from "@/utils/moment.js";
	export default {
		name: "CouponItem",
		props: {
			backgroundColor: {
				type: String,
				default: '#ffffff'
			},
			coupon: {
				type: Object,
				default () {
					return {}
				}
			},
			isSelected: {
				type: Boolean,
				default () {
					return false
				}
			},
			active: {
				type: Number,
				default: 1
			},
			totalprice:{
				type: String,
			},
			activeText: {
				type: String,
				default: '立即使用'
			},
			unActiveText: {
				type: String,
				default: '已使用'
			}
		},
		computed: {
			baseCoupon() {
				return this.coupon || {}
			},
			style() {
				return 'background-color:' + this.backgroundColor
			},
			validDateStr() {
				let usableStartAt = this.coupon.usableStartAt
				let usableEndAt = this.coupon.usableEndAt
				if (!usableEndAt) return ''
				let start = moment(usableStartAt)
				let end = moment(usableEndAt)
				let now = new Date()
				if (start > now || end < now) {
					return start.format("YYYY.MM.DD") + ' - ' + end.format("MM.DD")
				} else {
					let d = end.diff(now, 'days')
					if (d < 1) {
						return (end.diff(now, 'h') + 1) + '小时后过期'
					} else {
						return d + 1 + '天后过期'
					}
				}
			}
		},
		mounted(){
			console.log(this.isSelected);
		},
		methods: {
			click() {
				this.$emit('click', this.coupon)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-item {
		background-color: #fff;
		border-radius: 10upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		.bg-btn{
			border-radius: 30rpx;
			padding: 0 22upx;
			height: 42upx;
			line-height: 42upx;
			font-size: 20upx;
			margin-right: 30rpx;
			width: 75upx;
			text-align: center;
		}

		&.unactive {
			.discount-money {
				color: #A5A7B2;
			}

			.detail {
				color: #A5A7B2;
			}

			.action .btn {
				background-color: #BBBBBB;
				color: #fff;
			}
		}

		&.active {
			.discount-money {
				color: #e52302;
			}

			.action .btn {
				background-color: #f52302;
				color: #fff;
			}
		}

		.discount-money {
			width: 180upx;
			height: 220upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.price {
				font-size: 50upx;

				.unit {
					font-size: 24upx;
				}
			}

			.type {
				margin-top: 6upx;
				font-size: 22upx;
			}
		}

		.detail {
			flex: 1;

			.title {
				font-size: 28upx;
				display: flex;
				align-items: center;
			}

			.label {
				padding: 0 12upx;
				height: 32upx;
				line-height: 32upx;
				font-size: 20upx;
				margin-left: 8upx;
				color: #F27233;
				position: relative;
				border: 1px solid #F27233;
				display: inline;
				border-radius: 30rpx;
			}

			.valid-date {
				font-size: 24upx;
				margin-top: 10upx;
			}

			.limit-type {
				font-size: 22upx;
				margin-top: 10upx;
			}
		}

		.action {
			width: 180upx;
			display: flex;
			justify-content: center;

			view {
				width: 130upx;
				line-height: 44upx;
				font-size: 22upx;
				text-align: center;
				border-radius: 1000upx;
			}
		}
	}
</style>